<template>
	<view class="container">
		<view class="card">
			<view class="item flex-row" style="justify-content: flex-start;">
				<view class="label">负责人</view>
				<view>{{ username }}</view>
			</view>
			<view class="item flex-row">
				<view class="label">隐患类型</view>
				<view class="input flex-row">
					<input v-model="form['fxssp.title']" placeholder="随手拍..."/>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">隐患等级</view>
				<view class="input flex-row">
					<picker @change="changeDangerLevel" :value="dangerLevelIndex" :range="dangerLevels">
						<view class="value">{{ dangerLevels[dangerLevelIndex] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row" style="align-items: flex-start;">
				<view class="label">现场视图<text class="red">*</text></view>
				<view class="upload">
					<upload @upload="uploadFile" @delete="delPic" :auto="true" :count="3"></upload>
				</view>
			</view>
			<view class="item flex-row" style="align-items: flex-start;">
				<view class="label">隐患描述<text class="red">*</text></view>
				<textarea v-model="description" placeholder="隐患描述..." />
			</view>
			<view class="item flex-row">
				<view class="label">风险等级</view>
				<view class="input flex-row">
					<picker @change="changeRiskLevel" :value="riskLevelIndex" :range="riskLevels">
						<view class="value">{{ riskLevels[riskLevelIndex] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">隐患大类</view>
				<view class="input flex-row">
					<picker @change="changeDangerTopCate" :value="dangerTopIndex" :range="dangerTopCates" range-key="name">
						<view class="value">{{ dangerTopCates[dangerTopIndex].name }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">隐患小类</view>
				<view class="input flex-row">
					<picker @change="changeDangerSubCate" :value="dangerSubIndex" :range="dangerSubCates" range-key="name">
						<view class="value">{{ dangerSubCates[dangerSubIndex].name }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">整改期限</view>
				<view class="input flex-row">
					<picker @change="changeDate" :value="limitDate" :start="startDate" mode="date">
						<view class="value">{{ form['fxssp.limit_time'] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row">
				<view class="label">整改人</view>
				<view class="input flex-row" @click="toSelectMember">
					<input v-model="done_username" placeholder="选择整改人" disabled/>
					<uni-icons type="arrowright" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item btns flex-row">
				<view class="label"></view>
				<view class="input flex-row">
					<view @click="submit" class="btn">隐患提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import upload from '@/components/upload/';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { date } from '@/common/function.js';
import { DANGER_TOP_CATE, DANGER_SUB_CATE } from '@/common/config.js';
export default{
	components: { upload,uniIcons },
	data(){
		return {
			dangerLevels: ['一般事故隐患', '疑似重大事故隐患'],
			riskLevels: ['I','II','III','IV'],
			dangerTopCates: DANGER_TOP_CATE,
			dangerSubCates: DANGER_SUB_CATE,
			dangerLevelIndex: 0,
			riskLevelIndex: 0,
			dangerTopIndex: 0,
			dangerSubIndex: 0,
			username: '',
			startDate: '',
			limitDate: '',
			pics: [],
			description: '',
			done_userid: '',
			done_username: '',
			form: {
				userid: uni.getStorageSync("userid"),
				'fxssp.title': '会议解决内容',
				'fxssp.cart_top': 1,
				'fxssp.cart': 1,
				'fxssp.meet_id': '',
				'fxssp.danger_status': 1,
				'fxssp.pics': '',
				'fxssp.description': '',
				'fxssp.fx_status': 1,
				'fxssp.limit_time': '',
				'fxssp.done_userid': '',
				'fxssp.done_username': ''
			}
		}
	},
	onLoad(option){
		this.form['fxssp.meet_id'] = option.id;
		this.doDateTime();
		this.getUserDetail();
	},
	onShow(){
		this.done_userid = uni.getStorageSync("checked_dispatch_id") || uni.getStorageSync("userid");
		this.done_username = uni.getStorageSync("checked_dispatch_name");
	},
	onBackPress(){
		uni.removeStorageSync('checked_dispatch_id');
		uni.removeStorageSync('checked_dispatch_name');
	},
	methods: {
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 处理会议日期
		doDateTime(){
			let { year, month, day, hours, minutes } = date();
			this.startDate = `${year}-${month}-${day}`;
			this.limitDate = this.startDate;
			this.form['fxssp.limit_time'] = `${this.limitDate} 23:59:59`;
		},
		// 切换隐患等级
		changeDangerLevel(e){
			this.dangerLevelIndex = e.detail.value;
			this.form['fxssp.danger_status'] = this.dangerLevelIndex + 1;
		},
		// 切换风险等级
		changeRiskLevel(e){
			this.riskLevelIndex = e.detail.value;
			this.form['fxssp.fx_status'] = this.riskLevelIndex + 1;
		},
		// 切换大类
		changeDangerTopCate(e){
			this.dangerTopIndex = e.detail.value;
			this.form['fxssp.cart_top'] = this.dangerTopIndex + 1;
		},
		// 切换小类
		changeDangerSubCate(e){
			this.dangerSubIndex = e.detail.value;
			this.form['fxssp.cart'] = this.dangerSubIndex + 1;
		},
		// 切换日期
		changeDate(e){
			this.limitDate = e.detail.value;
			this.form['fxssp.limit_time'] = `${this.limitDate} 23:59:59`;
		},
		// 选择参会人员
		toSelectMember(){
			uni.navigateTo({
				url: 'dispatchMember'
			})
		},
		// 删除图片
		delPic(res){
			this.pics = this.pics.filter((item,idx)=>res.index != idx);
		},
		//上传图片
		uploadFile(res){
			let _this = this;
			res.temps.forEach(function(item,index){
				uni.uploadFile({
					url: _this.$API.upload,
					name: 'file',
					filePath: item,
					success: function(res) {
						let data = JSON.parse(res.data);
						_this.pics.push(data.fileName);
					},
					fail: function(res) {
						uni.showToast({
							title:"上传失败",
							icon:'none'
						})
					}
				});
			})
		},
		// 隐患提交
		submit(){
			let _this = this;
			// 数据校验
			if(this.pics.length == 0){
				return uni.showToast({icon: 'none', title: '请上传现场视图'})
			}
			if(!this.description){
				return uni.showToast({icon: 'none', title: '请输入隐患描述'})
			}
			
			// 处理图片数据
			this.form['fxssp.pics'] = this.pics.join(',');
			this.form['fxssp.description'] = this.description;
			this.form['fxssp.done_userid'] = this.done_userid;
			this.form['fxssp.done_username'] = this.done_username;
			
			// 处理隐患大类和小类
			this.form = JSON.parse(JSON.stringify(this.form));
			// this.form['fxssp.cart_top'] = 
			let currCartTop = this.dangerTopCates.filter(item=>item.id == this.form['fxssp.cart_top']);
			let currCart = this.dangerSubCates.filter(item=>item.id == this.form['fxssp.cart']);
			this.form['fxssp.cart_top'] = currCartTop[0].name;
			this.form['fxssp.cart'] = currCart[0].name;
			
			// 保存数据
			uni.showLoading({title: '提交中'});
			uni.request({
				url: this.$API.fxsspsave,
				data: this.form,
				method: 'POST',
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						// 清除缓存
						uni.removeStorageSync('checked_dispatch_id');
						uni.removeStorageSync('checked_dispatch_name');
						
						// 缓存数据
						let tmpData = {title: _this.form.title, pics: _this.pics };
						let resolveContent = uni.getStorageSync('meeting_resolve_content');
						if(resolveContent){
							resolveContent.push(tmpData);
							uni.setStorageSync('meeting_resolve_content', resolveContent);
						}else{
							uni.setStorageSync('meeting_resolve_content', [tmpData]);
						}
						uni.navigateBack();
					}else{
						uni.showToast({icon: 'none', title: '保存失败'});
					}
				},
				fail(){
					uni.hideLoading();
				}
			})
		},
		//获取用户信息
		getUserDetail(){
			let _this = this;
			uni.request({
				url: this.$API.getUserDetail,
				method:"POST",
				data:{ userid: this.form.userid},
				header:this.$API.get_head(),
				success: (res) => {
					_this.username = res.data.data.NAME;
					_this.done_username = this.done_username || _this.username;
				}
			})
		}
	}
}
</script>

<style scoped>
.red{
	color: red;
	font-weight: bold;
}
textarea{
	width: calc(100% - 160upx);
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
}
.upload{
	width: calc(100% - 160upx);
}
picker{
	width: calc(100% - 40upx);
	height: 68upx;
	line-height: 68upx;
}
	
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 30upx;
	text-indent: 24upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	margin-bottom: 20upx;
}
.card .item .label{
	width: 160upx;
}
.card .item .input{
	width: calc(100% - 160upx);
	height: 68upx;
	line-height: 68upx;
	padding: 0 20upx;
	background: #F2F2F2;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card .item  input,
.card .item .value{
	height: 68upx;
	line-height: 68upx;
	font-size: 28upx;
}
.card .item.btns .input{
	padding: 0;
	background: none;
}
.btn{
	color: #fff;
	width: 200upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	text-indent: 0;
	margin-right: 20upx;
	background-color: red;
}
</style>
